<template>
  <Page class="bank-list">
    <!--企业开户行-->
    <div class="log-list">
      <div class="log-list-div">
        <van-search
          v-model="searchValue"
          placeholder="请输入银行名称"
          action-text="搜索"
          @input="searchBank"
        />
      </div>
    </div>
    <div class="bank-body">
      <van-cell
        v-for="(item, index) in bankList"
        clickable
        :key="index"
        :title="item.bankName"
        @click="toggle(item)"
      >
        <template #right-icon>
          <van-checkbox
            :value="item.checked"
            ref="checkboxes"
            style="margin-left: 4px"
          />
        </template>
      </van-cell>
    </div>

    <!-- 底部的按钮 -->
    <div class="bank-btn">
      <van-button type="info" round class="bank-btn-item" @click="clickConfirm"
        >导出数据</van-button
      >
      <div class="all-select">全选</div>
    </div>
  </Page>
</template>

<script>
export default {
  name: "bankList",
  components: {},
  data() {
    return {
      // form表单
      form: {},
      radio: "0",
      searchValue: "",
      selectIds: [],
    };
  },
  props: {
    bankList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  created() {},
  methods: {
    changeBox() {
      // console.log(this.selectIds, 'selectIds')
    },
    clickCancel() {
      this.$emit("cancel");
    },
    clickConfirm() {
      this.$emit("clickConfirm");
    },
    submitForm() {
      if (!this.vali.status) {
        utils.ui.confirm("提交成功");
      }
    },
    searchBank() {
      this.$emit("searchBank", this.searchValue);
    },
    toggle(item) {
      console.log(item, "item");
      const hasSelectList = this.bankList.filter((pre) => pre.checked);
      // if(hasSelectList.length > 4) {
      //   if(!item.checked) {
      //     this.$toast('最多选择五家！')
      //   } else {
      //     item.checked = !item.checked
      //   }
      // } else {
      item.checked = !item.checked;
      // console.log(item, 'item')
      // }
      this.$forceUpdate();
    },
    clearValue() {
      this.searchValue = "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
// .log-list-div {
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   height: 52px;
//   background: #fff;
//   z-index: 999;
// }
.bank-list {
  border-top: 1px solid rgba(255, 255, 255, 0);
  position: fixed;
  left: 0;
  top: 0;
  background: #ffffff;
  z-index: $zIndex-popup;
  overflow-y: auto;
  // border: 1px solid red;
  height: 100vh;
  padding-bottom: 120px;
}
.bank-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  // border: 1px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  z-index: 999;
  // box-shadow: 0 0 0 1px rgba(131, 128, 128, 0.3);
  .bank-btn-item {
    height: 40px;
    width: 30%;
  }
  .all-select {
    color: #4b91e7;
    font-size: 14px;
  }
}
</style>
